<template>
	<view class="container">
		<!-- 提交加载 开始-->
		<u-loading-page :loading="pageLoading" loading-mode="spinner" loading-color="#FFFFFF" icon-size="36" font-size="12" color="#FFFFFF" loading-text="Loading···" bg-color="#00000050"></u-loading-page>
		<!-- 提交加载 结束-->
		<view class="heard">
			<view class="xiugai" @click="goToRegister(0)">
				<image class="xiugai-icon" src="https://www.afbeijing.net/static_resources/assets/xiugai.png" />
			</view>
			<view class="heard-case">
				<view class="heard-BG" :style="{ backgroundImage: backgroundImageUrl }" >
				<image class="avatar" :src="userInfo.headUrl||avatarUrl" />
				</view>
				<view class="user-info">
					<text class="user-name">{{ userInfo.fyName }}</text>
					<view class="point-container">
						<image class="point-icon-statr"
							src="https://www.afbeijing.net/static_resources/assets/jifen.png" />
						<text class="point-number">{{ userInfo.scoreCnt }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="case">
				<u-row gutter="16">
					<u-col span="10">
						<view class="point-container-inline">
							<view class="point-container-inline">
								<image class="point-icon"
									src="https://www.afbeijing.net/static_resources/assets/jfsc.png" />
								<text class="points">积分商城</text>
							</view>
						</view>
					</u-col>
					<u-col span="2">
						<view class="jiantou" @click="goToRegister(1)">
							<image class="jiantou-icon"
								src="https://www.afbeijing.net/static_resources/assets/jiantou2.png" />
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="case">
				<u-row gutter="16">
					<u-col span="10">
						<view class="point-container-inline">
							<view class="point-container-inline">
								<image class="point-icon"
									src="https://www.afbeijing.net/static_resources/assets/wdxx.png" />
								<text class="points">我的学习</text>
							</view>
						</view>
					</u-col>
					<u-col span="2">
						<view class="jiantou" @click="goToRegister(2)">
							<image class="jiantou-icon"
								src="https://www.afbeijing.net/static_resources/assets/jiantou2.png" />
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="case last-module">
				<u-row gutter="16">
					<u-col span="10">
						<view class="point-container-inline">
							<view class="point-container-inline">
								<image class="point-icon"
									src="https://www.afbeijing.net/static_resources/assets/xgmm.png" />
								<text class="points">修改密码</text>
							</view>
						</view>
					</u-col>
					<u-col span="2">
						<view class="jiantou" @click="goToRegister(3)">
							<image class="jiantou-icon"
								src="https://www.afbeijing.net/static_resources/assets/jiantou2.png" />
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="bottom-button" @click="logout">退 出 登 录</view>
	</view>
</template>

<script>
	import {
		queryLogout,selectInfo
	} from './api/index.js';
	export default {
		data() {
			return {
				pageLoading:false,
				userInfo: {
					// 修改点：给 featureUrl 一个默认值，避免未加载数据时为 undefined
					featureUrl: '' ,
				}, //用户数据
				avatarUrl: 'https://www.afbeijing.net/static_resources/assets/logo.png',
				userName: 'Grace',
				points: 100
			}
		},
		computed: {
			// 计算属性：处理背景图片 URL，确保不会因 featureUrl 为 undefined 而报错
			backgroundImageUrl() {
				if (this.userInfo.featureUrl) {
					return `url(${this.userInfo.featureUrl})`;
				} else {
					return 'url()'; // 当 featureUrl 为空时，返回空的 url()
				}
			}
		},
		watch: {
		    // 立即执行观察
		    userInfo: {
		      handler(newVal, oldVal) {
				  this.userInfo=newVal
		        console.log(`count changed from ${oldVal} to ${newVal}`);
		      },
		      immediate: true
		    }
		},
		onLoad(options) {
			console.log(123)
			this.userInfo = uni.getStorageSync('userInfo')
			if (!this.userInfo.featureUrl) {
				this.userInfo.featureUrl = '';
			}
			this.getInfo()
		},
		/**
		 * 页面显示时触发
		 * 每次打开页面都会触发
		 */
		onShow() {
			console.log(456)
			this.userInfo = uni.getStorageSync('userInfo')
		},
		methods: {
			//查询个人信息
			getInfo(){
				selectInfo().then(response => {
					console.log(response)
					if (response.code === 0) {
						this.userInfos =response.data
					}else{
					 uni.$u.toast(response.msg) 
					}
				}).catch(errors => {
								// uni.$u.toast(errors)
				})
			},
			goToRegister(e) {
				console.log(e)
				switch (e) {
					case 0:
						// 修改个人信息
						uni.navigateTo({
							url: '/src/views/pageMine/gerenxinxi/index' // 这里替换成你实际要跳转的页面路径
						});
						break;
					case 1:
						// 积分商城
						uni.navigateTo({
							url: '/src/views/pageMine/jifenshangcheng/index' // 这里替换成你实际要跳转的页面路径
						});
						break;
					case 2:
						// 我的学习
						uni.navigateTo({
							url: '/src/views/pageMine/wodexuexi/index' // 这里替换成你实际要跳转的页面路径
						});
						break;
					case 3:
						// 修改密码
						uni.navigateTo({
							url: '/src/views/pageMine/xiugaimima/index' // 这里替换成你实际要跳转的页面路径
						});
						break;
					default:
						break;
				}
			},
			logout() {
				queryLogout().then(response => {
					console.log(response)
					if (response.code === 0) {
						uni.$u.toast('退出成功')
						uni.reLaunch({
							url: '/src/views/pageMain/pageLogin/index' // 这里替换成你实际要跳转的页面路径
						});
						uni.removeStorageSync("token") //单独清除下token
						uni.clearStorageSync(); //清除所有数据
					} else {
						uni.$u.toast(response.msg)
					}
				}).catch(errors => {
					// uni.$u.toast(errors)
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";
	.heard-BG{
		width: 125rpx;
		height: 120rpx;
		border-radius: 50%;
		background-size: 100% 100%;
		padding: 10rpx;
		padding-left: 18rpx;
		margin-right: 20rpx;
	}
	.container {
		padding: 30rpx;
		height: 100vh;
	}

	.heard {
		height: 420rpx;
		width: 100%;
		background-image: url(#{$bgImageUrl}/assets/wodeBG.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.xiugai {
		padding-top: 5%;
		padding-right: 50rpx;
		text-align: right;
	}

	.xiugai-icon {
		width: 28rpx;
		height: 30rpx;
	}

	.heard-case {
		padding-top: 5%;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.user-info {
		display: flex;
		flex-direction: column;
	}

	.user-name {
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 43rpx;
	}

	.point-container {
		width: 120rpx;
		height: 40rpx;
		text-align: center;
		background: #FFFFFF;
		border-radius: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 24rpx;
		line-height: 40rpx;
		color: #FFB607;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.point-icon {
		width: 28rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}

	.main {
		margin-top: -160rpx;
		padding-left: 50rpx;
		padding-right: 50rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		width: 100%;
	}

	.case {
		padding: 40rpx 0 40rpx 0;
		width: 100%;
		background: #FFFFFF;
		border-bottom: 1px dashed #cccccc;
	}

	.last-module {
		border-bottom: none;
	}

	.point-container-inline {
		display: flex;
		align-items: center;
	}

	.points {
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 26rpx;
		color: #333333;
		line-height: 31rpx;
	}

	.point-icon-statr {
		width: 25rpx;
		height: 25rpx;
		padding-right: 10rpx;
	}

	.point-icon {
		width: 35rpx;
		height: 35rpx;
		padding-right: 20rpx;
	}

	.jiantou {
		text-align: right;
	}

	.jiantou-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.bottom-button {
		width: 650rpx;
		height: 80rpx;
		line-height: 50rpx;
		background: #FF8106;
		border-radius: 28rpx;
		position: absolute;
		bottom: 20rpx; // 距离底部 20rpx
		left: 50%; // 水平居中
		transform: translateX(-50%); // 水平居中微调
		padding: 15rpx 30rpx; // 内边距
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 24rpx;
		color: #FFFFFF;
	}
</style>